<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="520px"
      :before-close="closeDialog"
      append-to-body
      title="添加变量"
  >


    <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">


      <el-form-item prop="key" label="变量名">
        <el-input size= "small" type="text" placeholder="" style="width: 70%"  v-model="form.key"></el-input>
      </el-form-item>
      <el-form-item prop="value" label="变量值">
        <el-input size= "small" type="text" placeholder="" style="width: 70%"  v-model="form.value"></el-input>
      </el-form-item>
      <el-form-item prop="desc" label="描述">
        <el-input size= "small" type="text" placeholder="" style="width: 70%"  v-model="form.desc"></el-input>
      </el-form-item>


    </el-form>
    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>

  </el-dialog>

</template>

<script>

import ApprovalUserAdd   from "../approval/ApprovalUserAdd.vue";
import ApprovalUserUpdate from '../approval/ApprovalUserUpdate.vue';
import {utils} from "@v/process/processEditor/utils/common";
export default {
  components:{
    ApprovalUserAdd,
    ApprovalUserUpdate,
  },
  data(){
    return {
      node:{},
      labelPosition:'left',
      dialogVisible: false,
      loading: false,
      form: this.defaultForm()
    }
  },
  created(){

  },
  methods:{
    defaultForm(){
      return {
        id:"",
        cId:"",
        processId:"",
        nodeId:"",
        key:"",
        value:"",
        desc:"",
        order:0
      };
    },
    showDialog(row){
      this.form = this.defaultForm();
      this.node = row;
      this.form.nodeId = row.id;
      this.form.cid = utils.getUUID();
      this.dialogVisible = true
    },
    closeDialog(){
      this.form = {};
      this.dialogVisible = false
      this.loading = false
    },
    submit(){
      this.$emit('success',this.form)
      this.dialogVisible = false
      this.loading = false
    },
  }
}
</script>
<style lang="scss" scoped>
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
.el-form-item{
  height: 40px;
}
</style>